<script setup lang="ts">
import ExpressionIndicatorsTable from './ExpressionIndicatorsTable.vue'
import { useStatisticalIndicators } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'

const props = defineProps<{
  expression: string
}>()

const {
  lists: selectedIndicators,
  resolveIndicatorsByExpression,
} = useStatisticalIndicators()

watchEffect(() => {
  const t = unref(props.expression)
  if (t) {
    resolveIndicatorsByExpression(t)
  }
})
</script>

<template>
  <div class="expression-view">
    <div class="width-fill flex">
      <div class="flex-fillRemaining exp-input">
        <textarea
          :value="expression"
          readonly
          class="width-fill exp-area block border rounded-sm"
          :rows="8"
        />
        <ExpressionIndicatorsTable
          :data="selectedIndicators"
          class="margin-top-xs"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.exp-title {
  margin-bottom: 12px;
}
.exp-area {
  box-sizing: border-box;
  padding: 10px;
  outline: none;
  resize: none;
  white-space: pre-wrap;
}
</style>
